<template>
  <div class="EnergyStoragebox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect2
                      v-model="orgNo" 
                      @updateModelValue="changeqiye"
                      :optionlist="qiyelist"
                      :valuekey="{ name: 'bizOrgName', value: 'bizOrgNo' }"
                    ></FilterSelect2>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 4px;display: flex;">
                <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
                  <el-radio-button label="2">月</el-radio-button>
                  <el-radio-button label="3">年</el-radio-button>
                </el-radio-group>
                <el-date-picker v-if="radio3=='2'" size="small" v-model="value1"  type="month" 
                value-format="yyyy-MM" placeholder="选择月" style="flex: 1;"></el-date-picker>
                <el-date-picker v-else size="small" v-model="value2"  type="year" value-format="yyyy"
                 placeholder="选择年" style="flex: 1;"></el-date-picker>
              </el-col>
              <el-col :span="5">
                <el-form-item label="储能设备">
                  <el-select v-model="device" multiple placeholder="请选择储能设备" filterable size="small" style="width: 100%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.deviceName" :value="item.deviceId"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="xiangqinglist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
    </div>
    <div class="bodybox">
      <div class="title">
        <div>储能分析</div>
        <div class="butexp">
           <TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        <el-table-column label="充电电量(kWh)">
            <el-table-column
              prop="chargeSharpCapacity"
              label="尖"
              align="right">
            </el-table-column>
            <el-table-column
              prop="chargePeakCapacity"
              label="峰"
              align="right">
            </el-table-column>
            <el-table-column
              prop="chargeFlatCapacity"
              label="平"
              align="right">
            </el-table-column>
            <el-table-column
              prop="chargeValleyCapacity"
              label="谷"
              align="right">
            </el-table-column>
            <el-table-column
              prop="chargeDeepValleyCapacity"
              label="深"
              align="right">
            </el-table-column>
            <el-table-column
              prop="chargeCapacity"
              label="总"
              align="right">
            </el-table-column>
          </el-table-column>
          <el-table-column label="放电电量(kWh)">
            <el-table-column
              prop="dischargeSharpCapacity"
              label="尖"
              align="right">
            </el-table-column>
            <el-table-column
              prop="dischargePeakCapacity"
              label="峰"
              align="right">
            </el-table-column>
            <el-table-column
              prop="dischargeFlatCapacity"
              label="平"
              align="right">
            </el-table-column>
            <el-table-column
              prop="dischargeValleyCapacity"
              label="谷"
              align="right">
            </el-table-column>
            <el-table-column
              prop="dischargeDeepValleyCapacity"
              label="深"
              align="right">
            </el-table-column>
            <el-table-column
              prop="dischargeCapacity"
              label="总"
              align="right">
            </el-table-column>
          </el-table-column>
          <el-table-column
              prop="chargeDischargeEfficiency"
              label="充放电效率(%)"
              align="right">
            </el-table-column>
        </TableColumn>
      </div>
    </div>
  </div>
</template>

<script>
import { getuserlistapi,getchunneglistappi,getchunnegpageapi} from '@/api/analysis'
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      value1:'',
      value2:'',
      radio3:'2',
      orgNo: '',
      device:[],
      qiyelist: [],
      options: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '70', center: 'center' },
        {label:'设备',prop:'deviceName' , width: '150'},
        {label:'日期',prop:'date', center: 'center' },
      ],
      issize: 'medium',
      equipNames:[]
    };
  },

  async mounted() {
    const {data:{list:array}} = await getuserlistapi()
    this.qiyelist = array
    this.orgNo = this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0]?.bizOrgNo
    this.gettime()
    await this.getchunneg(this.orgNo)
    this.xiangqinglist()
  },

  methods: {
    // 获取表格数据
    async xiangqinglist() { 
      this.$refs.tabledata.loading=true
      this.$refs.tabledata.loading=true
      this.equipNames = this.options.map(ele => {
        if (this.device.some(item =>item==ele.deviceId)) {
          return ele.deviceName
        }
      }).filter(Boolean)
      const { data: { list } } = await getchunnegpageapi({
        companyNo: this.orgNo, dateTime: this.radio3 == '2' ? this.value1 : this.value2, dateType: this.radio3,
        equipIds:this.device.join(','),equipNames:this.equipNames.join(',')
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
    // 企业下拉
    changeqiye(val) {
      this.$store.commit('setuserobject', val)
      this.getchunneg(val)
    },
    // 获取储能设备下拉
    async getchunneg(val) {
      const { data: { list } } = await getchunneglistappi({ companyNo: val })
      this.device=[list[0]?.deviceId]
      this.options=list
    },
    // 重置
    async chongzhi() { 
      this.radio3 = '2'
      this.gettime()
      this.orgNo = this.$store.state.statistics.userbizOrgNo ? this.$store.state.statistics.userbizOrgNo : this.qiyelist[0]?.bizOrgNo
      await this.getchunneg(this.orgNo)
      this.xiangqinglist()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel('pio-microservice-biz/pio/ect/statistical/analysis/energy/storage/exportExcel',{
        companyNo: this.orgNo, dateTime: this.radio3 == '2' ? this.value1 : this.value2, dateType: this.radio3,
        equipIds:this.device.join(','),equipNames:this.equipNames.join(',')
      },'储能分析')
    },
    // 刷新列表
    shuaxin() {
      this.xiangqinglist()
      this.$message.success('列表刷新成功')
    },
      // 获取当前时间戳
   gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
     const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      this.$set(this,'value1',year + '-' + month )
      this.$set(this,'value2',year.toString())
    },
  },
};
</script>

<style  scoped lang="scss">
.EnergyStoragebox{
  height:100%;
  padding:10px;
  .topbox{
    height: 80px;
    background-color: #fff;
    padding:  20px;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butexp{
        display: flex;
        .moban{margin-right: 10px;}
      }
    }
    .table{
      height: 94%;
    }
  }
}
</style>